<template>
  <div class="index_wrap">
    <div class="scroll_wrap">
      <div class="head_wrap">
        <div class="head_top">
          <div class="left_wrap">
            <img :src="headImg" alt="" class="header_img">
            <span class="user_name">{{userName}}</span>
          </div>
          <div class="scan" @click="scan">
            <i class="iconfont icon-yduierweimasaomiao"></i>
            <span>Scan</span>
          </div>
        </div>
        <div class="head_content">
          <router-link tag="div" :to="{path: 'presentPoint'}">
            <div class="left">
              <div class="balance">Now point ( CNY )</div>
              <h2>{{balance}}</h2>
            </div>
            <div class="right">
              <img src="../image/index_img.jpg" alt="">
            </div>
          </router-link>
          <ul class="money_list">
            <router-link tag="li" :to="{path: item.link}" class="money_item" v-for="(item, index) in moneyList" :key="index">
              <span class="type">{{item.type}}</span>
              <span class="money">{{item.money}}</span>
            </router-link>
          </ul>
        </div>
      </div>
      <div class="advertisement">
        <swiper :options="swiperOption" ref="mySwiper" class="swiper_banner" id="swiper">
          <!-- slides -->
          <swiper-slide v-for="(item, index) in swiperImg" :key="index" class="slide"><img class="img" :src="item.image" /></swiper-slide>
          <!-- Optional controls -->
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
      </div>
      <ul class="nav_list">
        <router-link tag="li" :to="{path: item.link}" class="nav_item" v-for="(item, index) in navList" :key="index">
          <img :src="item.icon" alt="">
          <span>{{item.name}}</span>
        </router-link>
      </ul>
    </div>
    <foot></foot>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
  name: 'index',
  data () {
    return {
      swiperImg: [require('../image/banner.png'), require('../image/banner.png'), require('../image/banner.png')],
      swiperOption: {
        autoplay: true,
        // loop: true,
        slidesPerView: 'auto',
        autoplayDisableOnInteraction: false,
        pagination: {
          el: '.swiper-pagination'
        }
      },
      headImg: '',
      userName: '',
      balance: '',
      moneyList: [
        {
          type: 'Return point',
          money: '',
          link: ''
        },
        {
          type: 'YTCC',
          money: '',
          link: 'YTCC'
        },
        {
          type: 'Currency',
          money: '',
          link: 'currencyTreasure'
        }
      ],
      navList: [
        {
          icon: require('../image/turn_into.png'),
          name: 'To change into',
          link: 'turnInto'
        },
        {
          icon: require('../image/turn_out.png'),
          name: 'Turn out',
          link: 'turnOut'
        },
        {
          icon: require('../image/exchange.png'),
          name: 'Exchange',
          link: 'exchange'
        },
        {
          icon: require('../image/trade.png'),
          name: 'YTCCTrading hall',
          link: 'tradingPurchase'
        },
        {
          icon: require('../image/sale.png'),
          name: 'Present hall',
          link: 'buyIn'
        },
        {
          icon: require('../image/buy2.png'),
          name: 'Sale present',
          link: 'purchase'
        }
      ]
    };
  },
  components: {
    swiper,
    swiperSlide
  },
  mounted () {
    this.getInfo();
    this.getBanner();
  },
  methods: {
    // Scan
    scan () {
      try {
        // ios
        if (/(iPhone | iPod | ios | ipad)/ig.test(navigator.userAgent)) {
          // alert('ios');
          window.webkit.messageHandlers.appScan.postMessage(null);
        } else { // android
          // alert('android');
          android.appScan();
        }
      } catch (error) {
        this.Toast('Not yet open, please look forward to it!');
      }
    },
    // Front page interface
    getInfo () {
      this.axios.get('index/users/userinfo').then(({data}) => {
        if (data.status === 200) {
          this.userName = data.data.nickname;
          this.headImg = data.data.avatar;
          this.balance = data.data.present_point;
          this.moneyList[0].money = data.data.return_point;
          this.moneyList[1].money = data.data.xxm;
          this.moneyList[2].money = data.data.currency_treasure;
          if (data.data.level !== 'vipuser') {
            this.moneyList[0].link = 'rebate';
          } else {
            this.moneyList[0].link = 'vipRebate';
          }
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Sowing map
    getBanner () {
      this.axios.get('index/users/banner').then(({data}) => {
        if (data.status === 200) {
          this.swiperImg = data.data;
        } else {
          this.Toast(data.message);
        }
      });
    }
    // get data
    // getData () {
    //   this.axios.get('index/rename/rename_s').then(({data}) => {
    //     if (data.status === 200) {
    //       this.trueName = data.data.username;
    //       this.idCard = data.data.id_card;
    //       if (!this.trueName || !this.idCard) {
    //         this.Modal('Real name authentication', 'You do not have real name authentication yet., Please go to the certification first.', 'To authenticate', () => {
    //           this.$router.push('certification');
    //         });
    //       }
    //     } else if (data.status === 201) {
    //       if (!this.trueName || !this.idCard) {
    //         this.Modal('Real name authentication', 'You do not have real name authentication yet., Please go to the certification first.', 'To authenticate', () => {
    //           this.$router.push('certification');
    //         });
    //       }
    //     } else {
    //       this.Toast(data.message);
    //     }
    //   });
    // }
  }
};
</script>

<style lang='scss' scoped>
  @import '../style/mixin.scss';
  .index_wrap {
    background-color: #fbfbfc;
    padding-bottom: 100px;
    height: 100%;
    display: flex;
    flex-direction: column;
    .scroll_wrap{
      flex: 1;
      overflow-y: auto;
      padding-bottom: 60px;
      .head_wrap{
        width: 100%;
        height: 558px;
        padding: 60px 40px 0;
        background: url(../image/index_bg.png) top no-repeat;
        background-size: 100%;
        margin-bottom: 30px;
        .head_top{
          width: 100%;
          display: flex;
          justify-content: space-between;
          margin-bottom: 40px;
          .left_wrap{
            display: flex;
            align-items: center;
            .header_img{
              width: 80px;
              height: 80px;
              border-radius: 50%;
              margin-right: 20px;
            }
          }
          .scan{
            display: flex;
            align-items: center;
            color: #212121;
            .iconfont{
              font-size: 38px;
              margin-right: 12px;
            }
            span{
              font-size: 32px;
            }
          }
        }
        .head_content{
          width: 100%;
          // height: 380px;
          padding: 56px 40px 50px;
          background-color: #fff;
          border-radius: 20px;
          box-shadow: 0 0 18px 2px rgba(240, 240, 240, .8);
          >div{
            width: 100%;
            display: flex;
            justify-content: space-between;
            .balance{
              font-size: 28px;
              color: #666;
              margin-bottom: 30px;
            }
            h2{
              font-size: 48px;
              height: 48px;
              line-height: 48px;
              color: $color;
              margin-bottom: 68px;
            }
            .right{
              width: 280px;
              height: 190px;
              margin-top: -24px;
              img{
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
          }
          .money_list{
            width: 100%;
            display: flex;
            .money_item{
              flex: 1;
              display: flex;
              flex-direction: column;
              position: relative;
              &::after{
                display: block;
                content: '';
                width: 1px;
                height: 54px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 12%;
                background-color: #e6e6e6;
              }
              &:nth-last-child(1) {
                &::after{
                  display: none;
                }
              }
              .type{
                font-size: 26px;
                color: #999;
                margin-bottom: 20px;
              }
              .money{
                font-size: 28px;
                color: #282828;
              }
            }
          }
        }
      }
      .advertisement{
        width: 100%;
        height: 202px;
        padding: 0 40px;
      }
      .nav_list{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .nav_item{
          width: 33.33%;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-top: 50px;
          >img{
            width: 68px;
            height: 68px;
            margin-bottom: 30px;
          }
          >span{
            font-size: 28px;
            color: #666;
          }
        }
      }
    }
  }
</style>

<style lang="scss">
  @import '../style/swiper.scss';
  @import '../style/mixin.scss';
  .swiper_banner {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
    border-radius: 16px;
    .slide {
      width: 100%;
      .img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        border-radius: 16px;
      }
    }
    .swiper-pagination-bullets {
      .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        background-color: #fed1a3;
        margin-right: 14px;
        &.swiper-pagination-bullet-active {
          background-color: #fff;
        }
      }
    }
  }
</style>
